<template>
  <div class="canvas-container">
    <!-- 画布渲染核心（成员B开发） -->
    <CanvasRenderer />
    <!-- 操作按钮区（添加图形、上传图片） -->
    <div class="canvas-controls">
      <Button @click="addRect">添加矩形</Button>
      <Button @click="addCircle">添加圆形</Button>
      <Button @click="addRoundedRect">添加圆角矩形</Button>
      <ImageUpload />
      <Button @click="addText">添加文本</Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useElementStore } from '@/store'
import { ElementType, ShapeType } from '@/types'
import CanvasRenderer from './CanvasRenderer.vue'
import ImageUpload from './ImageUpload.vue'
import Button from '../Toolbar/Common/Button.vue'

const elementStore = useElementStore()

// 添加矩形
const addRect = () => {
  elementStore.addElement({
    type: ElementType.SHAPE,
    shapeType: ShapeType.RECT,
    x: 100,
    y: 100,
    width: 200,
    height: 150,
    background: '#ffffff',
    borderWidth: 2,
    borderColor: '#000000'
  })
}

// 添加圆形（圆形的width和height保持一致）
const addCircle = () => {
  elementStore.addElement({
    type: ElementType.SHAPE,
    shapeType: ShapeType.CIRCLE,
    x: 350,
    y: 100,
    width: 150,
    height: 150,
    background: '#ffffff',
    borderWidth: 2,
    borderColor: '#000000'
  })
}

// 添加圆角矩形
const addRoundedRect = () => {
  elementStore.addElement({
    type: ElementType.SHAPE,
    shapeType: ShapeType.ROUNDED_RECT,
    x: 550,
    y: 100,
    width: 200,
    height: 150,
    background: '#ffffff',
    borderWidth: 2,
    borderColor: '#000000'
  })
}

// 添加文本元素
const addText = () => {
  elementStore.addElement({
    type: ElementType.TEXT,
    x: 200,
    y: 300,
    width: 300,
    height: 80,
    delta: { ops: [{ insert: '请双击编辑文本', attributes: { bold: false } }] },
    defaultStyle: {
      fontSize: 16,
      fontFamily: 'Arial',
      color: '#333333',
      background: 'transparent'
    }
  })
}
</script>

<style scoped>
.canvas-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.canvas-controls {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 8px;
  z-index: 100; /* 确保在画布上方显示 */
  background-color: rgba(255, 255, 255, 0.9);
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>